<template>
    <view class="zai-box">
		<view class="status_bar">
			  <!-- 这里是状态栏 --> 
		</view>
		
        <image src="../static/logo/register.png" mode='aspectFit' class="zai-logo"></image>
        <view class="zai-title">注册</view>
        <view class="zai-form">
            <input class="zai-input" placeholder-class v-model="UserInfo.name" placeholder="请输入用户名" />
            <input class="zai-input" placeholder-class  v-model="UserInfo.phone" placeholder="请输入手机号"/>
            <input class="zai-input" placeholder-class password v-model="UserInfo.pwd" placeholder="请输入密码"/>
            <button class="zai-btn" @tap="UserRegist">立即注册</button>
            <navigator url="pages/login" open-type='navigateBack' hover-class="none" class="zai-label">已有账号，点此去登录.</navigator>
        </view>
    </view>
</template>

<script>

export default{
		data(){
			return{
				UserInfo:{
				    name:'',
					phone:'',
				    pwd:'',
				}
			}
		},
		methods:{
			async UserRegist(){
				console.log(123)
				if(this.UserInfo.name.length === 0 || this.UserInfo.pwd.length === 0 || this.UserInfo.phone.length === 0 ){
					uni.showModal({
						content: '输入不能为空，请检查后提交！！！',
						showCancel: false
					});
				}else{
					console.log(12456)
					var data = await this.$http.userService.UserRegist(this.UserInfo)
					//成功注册后呢，咱跳转到到登录界面
					console.log(12456)
					uni.redirectTo({
					    url: '/pages/login',
						animationType: 'pop-in',
						animationDuration: 200
					});
					
				}
			}
		}
}




</script>

<style scoped>
	.status_bar {
	    height: var(--status-bar-height);
	    width: 100%;
	}
    .zai-box{
        padding: 0 100upx;
        position: relative;
    }
    .zai-logo{
        width: 100%;
        width: 100%;
        height: 310upx;
    }
    .zai-title{
        position: absolute;
        top: 10px;
        line-height: 360upx;
        font-size: 68upx;
        color: #fff;
        text-align: center;
        width: 100%;
        margin-left: -100upx;
    }
    .zai-form{
        margin-top: 300upx;
    }
    .zai-input{
        background: #e2f5fc;
        margin-top: 30upx;
        border-radius: 100upx;
        padding: 20upx 40upx;
        font-size: 36upx;
    }
    .input-placeholder, .zai-input{
        color: #94afce;
    }
    .zai-label{
        padding: 60upx 0;
        text-align: center;
        font-size: 30upx;
        color: #a7b6d0;
    }
    .zai-btn{
        background: #ff65a3;
        color: #fff;
        border: 0;
        border-radius: 100upx;
        font-size: 36upx;
        margin-top: 60upx;
    }
    .zai-btn:after{
        border: 0;
    }
    /*按钮点击效果*/
    .zai-btn.button-hover{
        transform: translate(1upx, 1upx);
    }
	
	
	
	
	
	
/* 	.status_bar
	    height var(--status-bar-height)
	    width 100%
	
	.zai-box
	    padding 0 100upx
	    position relative
	
	.zai-logo
	    width 100%
	    width 100%
	    height 310upx
	
	.zai-title
	    position absolute
	    top 0
	    line-height 360upx
	    font-size 68upx
	    color #fff
	    text-align: center
	    width 100%
	    margin-left -100upx
	
	.zai-form
	    margin-top 300upx
	
	.zai-input
	    background #e2f5fc
	    margin-top 30upx
	    border-radius 100upx
	    padding 20upx 40upx
	    font-size 36upx
	
	.input-placeholder, .zai-input
	    color #94afce
	
	.zai-label
	    padding 60upx 0
	    text-align center
	    font-size 30upx
	    color #a7b6d0
	
	.zai-btn
	    background #ff65a3
	    color #fff
	    border 0
	    border-radius 100upx
	    font-size 36upx
	    margin-top 60upx
	
	.zai-btn:after
	    border 0
	
	
	.zai-btn.button-hover
	    transform translate(1upx, 1upx) */
</style>
